<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>给节目添加演员</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../css/font.css">
		<link rel="stylesheet" href="../../css/weadmin.css">
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演员管理</a>
        <a><cite>演员列表</cite></a>
      </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="weadmin-body">
			<div class="layui-row">
				<form class="layui-form layui-col-md12 we-search">
					<div class="layui-inline">
						<input type="text" id="performer_name" name="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
				</form>
			</div>

			<table class="layui-table" id="performerList" lay-filter="performer">

			</table>
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" lay-event="add">添加到本节目</a>
			</script>
		</div>
		<script src="../../lib/jquery-2.1.1/jquery.js"></script>
		<script src="../../js/admin.js"></script>
		<script>
			layui.extend({
				admin: '{/}../../js/admin'
			});
			var messageId = localStorage.getItem("message_id_addPerformer")
			layui.use(['laydate','form', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function() {
				var laydate = layui.laydate //日期
						, laypage = layui.laypage //分页
						, layer = layui.layer //弹层
						, table = layui.table //表格
						, upload = layui.upload //上传
						, form = layui.form

				form.on('submit(search)', function(data){
					console.log(data.field)
					getPage()
					return false;
				});
				getPage();
				function getPage(){
					table.render({
						elem: '#performerList'
						, height: 500
						, url: '/performer/queryAllByLimit' //数据接口
						,where: {name:$("#performer_name").val()}
						,method: 'post'
						, title: '演员表'
						, page: true //开启分页
						, toolbar: false //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
						, totalRow: false //开启合计行
						, cols: [[ //表头
							{type: 'checkbox', fixed: 'left'}
							, {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left', totalRowText: '合计：'}
							, {field: 'name', title: '演员名', width: 200}
							, {field: 'mobile', title: '手机号', width: 200,  totalRow: true}
							, {field: 'createTime', title: '创建时间', width: 200,  totalRow: true}
							,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
						]]
					});

				}
				//监听行工具事件
				table.on('tool(performer)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
							, layEvent = obj.event; //获得 lay-event 对应的值
					if (layEvent === 'add') {
						//添加到本节目
						$.ajax({
							url:'/performProgram/add',
							method: 'post',
							data:{"programId":messageId,"performId":data.id},
							success(res){
								layer.msg('添加成功')
							},
							error(err){
								layer.msg('添加失败')
							}
						})




					}
				})
			});
		</script>
	</body>

</html>